<template>
  <div class="dls-salw-reward-order">
    <recommend-header :headerData="headerData"></recommend-header>
    <main>
       <div class="dls-nav">
        <div class="aGroup clearfix">
          <!-- TODO 使用小程序滚动 -->
          <wx-scroll-view :scroll-x="canScrollX">
            <div class="content">
              <van-button class="span" data-id="1"  @click="selectItem(1)" :color="[classType == 1 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>全部</i>
                <em>{{arr['1']}}</em>
              </van-button>
              <van-button class="span" data-id="2"  @click="selectItem(2)" :color="[classType == 2 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>未付款</i>
                <em>{{arr['2']}}</em>
              </van-button>
              <van-button class="span" data-id="3"  @click="selectItem(3)" :color="[classType == 3 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>已付款</i>
                <em>{{arr['3']}}</em>
              </van-button>
              <van-button class="span" data-id="4"  @click="selectItem(4)" :color="[classType == 4 ? '#F30C23':'#999999']" plain hairline round type="primary">
                <i>已确认收货</i>
                <em>{{arr['4']}}</em>
              </van-button>
            </div>
          </wx-scroll-view>
        </div>
      </div>
      <div class="user-list" v-show="list.length">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          :immediate-check="immediateCheck"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        >
          <div v-for="(item, index) in list" :key="index" class="item">
            <div class="dhs-virtual-icon" v-if="item.is_dhs_virtual == 1"></div>
            <div class="fxordertit clearfix">
              <span class="fl">订单日期：{{item.end_time}}&nbsp;</span>
              <span class="fl">付款日期：{{item.pay_time}}</span>
              <span class="fr" :class="[item.status == 3 ? 'ready' : '']">{{item.status_name}}</span>
            </div>
            <div class="fxorderlst clearfix">
              <div class="dxPic fl">
                <img :src="item.avthor||defaultPhotoImg" class="user" width="100%" />
              </div>
              <div class="fxorderinfo fl">
                <div>
                  <p>姓名：</p>
                  <p>{{item.receiver_name}}</p>
                </div>
                <div>
                  <p>订单状态：</p>
                  <p>{{item.order_status}}</p>
                </div>
                <div>
                  <p>金额：</p>
                  <p>{{mSymbol.name}}{{item.money}}</p>
                </div>
                <div>
                  <p>级别：</p>
                  <p>{{item.level_name}}</p>
                </div>
                <div>
                  <p>{{item.commission_name}}：</p>
                  <p>{{mSymbol.name}}{{item.commission}}</p>
                </div>
                <p class="check_detail"
                  @click="Jump(item.order_id)">
                  <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary">查看订单商品明细</van-button>
                  <!-- <svg-icon icon-class="icon_right"
                            class="all-class-icon"></svg-icon> -->
                </p>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div v-show="!list.length && finished">
        <no-data :noData="noData"></no-data>
      </div>
    </main>
  </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'
import recommendHeader from '@/views/user/components/recommendHeader'
import Scroll from '@/components/scroll/index'
import { getDlsSaleRewardOrder } from '@/api/user/dls/dlsApi'
import { mapGetters } from 'vuex'
export default Vue.extend({
  data() {
    return {
      canScrollX: true,
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png',
        text: '暂无销售奖订单',
        marginTop: '5em'
      },
      headerData: {
        settle_commission: '',
        all_order_amount: '',
        dls_num: '',
        order_total: '',
        type: 1
      },
      classType: 1,
      p: 1,
      arr: {
        1: '',
        2: '',
        3: '',
        4: ''
      },
      list: [],
      error: false,
      loading: false,
      finished: false,
      immediateCheck: false
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    Jump(order_id) {
      const path = 'dlsSaleRewardOrderDetail'
      this.$JumpPath(this, path, { order_id })
    },
    onLoad() {
      if (this.finished) return false
      const data = { p: this.p, type: this.classType }
      getDlsSaleRewardOrder(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (data.p == 1) {
            this.headerData.settle_commission = res.data.settle_commission
            this.headerData.all_order_amount = res.data.all_order_amount
            this.headerData.dls_num = res.data.dls_num
            this.headerData.dls_team_num = res.data.dls_team_num
            this.headerData.order_total = res.data.order_total
            this.arr = res.data.arr
            this.list = []
          }
          this.list.push(...res.data.order_list)
          if (res.data.order_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换类型
    selectItem(type) {
      if (this.classType == type) return
      this.classType = type
      this.p = 1
      this.finished = false
      this.error = false
      this.loading = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      this.onLoad()
    }
  },
  components: {
    recommendHeader,
    noData,
    Scroll
  },
  computed: {
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/user/Group/index';
@import 'src/styles/user/orderList/index';
.dls-nav{
  border-top: 1px solid #ededed;
  padding: 10px 30px;
  background: #fff;
}
.aGroup .span {
  height: 52px;
}
</style>
